<template>
  <div class="auto">
    <validator name='v'>
      <form novalidate class="form-horizontal">
        <p class="bg-info text-center" style="padding: 8px;">卡表收费</p>
        <div class="row" style="margin-top:6px;">
          <div id="unit" class="col-sm-3 form-input-group">
            <label for="f_paytype" class="control-label">付款方式:</label>
              <v-select id="pay"
              v-model="model.f_payment"
              placeholder='请选择'
              :value.sync="model.f_payment"
              :options='paytype'
              close-on-select clear-button>
            </v-select>
          </div>
          <div class="from-group" :class="[$v.f_pregas.required ? 'has-error' : 'has-success']">
            <label for="f_pregas" class=" col-sm-1 control-label">预购气量:</label>
            <div class="col-sm-2">
              <input class="form-control"  type="number" v-model="model.f_pregas"
              @blur="pregas()" v-validate:f_pregas='{required: true }' placeholder="预购气量" v-next-el='sk'>
            </div>
          </div>
          <div class="from-group" :class="[$v.f_preamount.required ? 'has-error' : 'has-success']">
            <label for="f_preamount" class=" col-sm-2 control-label">预购金额:</label>
            <div class="col-sm-2">
              <input class="form-control"  type="number"
                @blur="preamount()" v-model="model.f_preamount" v-scale = "[model.f_preamount, 2]"
                v-validate:f_preamount='{required: true }' placeholder="预购金额" v-next-el='sk'>
            </div>
          </div>
        </div>
        <div class="row" style="margin-top:6px;">
          <print-style :print.sync='model.f_print'></print-style>
          <div class="col-sm-3"></div>
          <label for="f_totalcost" class=" col-sm-2 control-label">应收金额:</label>
          <div class="col-sm-2">
            <input class="form-control"  type="number" v-model="model.f_totalcost"
            v-scale = "[model.f_totalcost, 2]" placeholder="应收金额" disabled>
          </div>
        </div>
        <div class="row" style="margin-top:6px;">
          <div class="from-group">
            <label for="f_balance" class=" col-sm-1 control-label">上期结余:</label>
            <div class="col-sm-2">
              <input class="form-control"  type="number" v-model="model.f_balance"
              v-scale = "[model.f_balance, 2]" placeholder="上期结余" disabled>
            </div>
          </div>
          <div class="from-group">
            <label for="f_curbalance" class="col-sm-1 control-label">本期结余:</label>
            <div class="col-sm-2">
              <input class="form-control"  type="number" v-model="curbalance"
              v-scale = "[curbalance, 2]" placeholder="本期结余" disabled>
            </div>
          </div>
          <div :class="[$v.f_collection.required ? 'has-error' : 'has-success']">
            <label for="f_collection" class=" col-sm-2 control-label">收款:</label>
            <div class="col-sm-2">
              <input id="f_collection" class="form-control" type="number" v-model="model.f_collection"
              v-validate:f_collection='{  required: true, dctest: [ model.f_totalcost, ">=" ] }' v-el:sk
               v-scale = "[model.f_collection, 2]">
              <span v-if="$v.f_collection.dctest && model.f_pregas != '' && model.f_preamount != '' "
              style="color:red ">收款不能小于应收金额</span>
            </div>
          </div>
        </div>
        <div class="row" style="margin-top:10px;" v-if="cal">
          <div class="col-sm-4 col-sm-offset-7">
            <strong>计算公式: {{calculatedetail}}</strong>
          </div>
        </div>
      </form>
      <print-bill :show="print" v-ref:printbill v-on:toggle="close"></print-bill>
      <div style="text-align:right;margin-top:80px;margin-right:50px;">
        <button class="btn btn-success width-60" @click="confirm()"  :disabled='!$v.valid'>确认</button>
        <button class="btn btn-default width-60" @click="clean()" style="width:80px;margin-left:20px;">取消</button>
      </div>
    </validator>
  </div>
</template>
<script>
/**
*综合业务
*卡表收费组件
*/
import AppData from '../../../stores/AppData'

export default {
  title: '卡表收费',
  data () {
    return {
      model: {
        f_payment: '现金缴费',
        f_pregas: '',
        f_preamount: '',
        f_totalcost: '',
        f_curbalance: '',
        f_collection: '',
        f_balance: ''
      },
      cal: false,
      calculatedetail: ''
    }
  },
  props: ['row'],
  ready () {
    this.model.f_price_id = this.row.f_price_id
    this.model.f_user_id = this.row.f_user_id
    this.model.f_userinfo_id = this.row.f_userinfo_id
    this.model.f_balance = this.row.f_balance
  },
  watch: {
    'row' (val) {
      this.model.f_stairprice_id = val.f_stairprice_id
      this.model.f_user_id = val.f_user_id
      this.model.f_userinfo_id = val.f_userinfo_id
    }
  },
  methods: {
    confirm () {
      this.model.f_curbalance = this.curbalance
      this.model.f_payment = this.model.f_payment[0]
      this.$CardService.sellgas(this.model, this.row)
      .then(
        (res) => this.$dispatch('success', '卡表收费', this.row, res)
      ).catch(
        (error) => {
          if (error.status === 603) {
            this.$error('重复提交')
            return
          }
          this.$dispatch('error', '卡表收费', this.row, error)
        }
      )
    },
    clean () {
      this.$info('取消操作')
      this.$dispatch('clean', this.row)
    },
    pregas () {
      if (this.model.f_pregas) {
        if (this.row.f_isdecimal === '是') {
          this.model.f_pregas = (this.model.f_pregas - 0).toFixed(2)
        } else {
          this.model.f_pregas = (this.model.f_pregas - 0).toFixed(0)
        }
        this.model.f_meter_type = this.row.f_meter_type
        this.$CommonService.gasCalculate(this.model, this.model.f_pregas).then((res) => {
          // let l = res.da
          this.model.f_preamount = res.data.chargenum
          // Object.assign(this.model, this.model, res.data.chargeprice)
          this.model.chargeprice = res.data.chargeprice
          this.calculate()
          this.cal = true
          this.calText(res.data.chargeprice)
        }).catch((error) => {
          this.$dispatch('error', '卡表收费', this.model, error)
        })
      }
    },
    preamount () {
      if (this.model.f_preamount) {
        this.model.f_meter_type = this.row.f_meter_type
        this.$CommonService.feeCalculate(this.model, this.model.f_preamount).then((res) => {
          this.model.f_pregas = res.data.gas
          this.model.chargeprice = res.data.chargeprice
          Object.assign(this.model, this.model, res.data)
          this.calculate()
          this.cal = true
          this.calText(res.data.chargeprice)
        }).catch((error) => {
          this.$dispatch('error', '卡表收费', this.model, error)
        })
      }
    },
    calculate () {
      this.model.f_collection = 0
      if (this.model.f_preamount < this.model.f_balance) {
        this.model.f_totalcost = 0
        this.model.f_curbalance = this.model.f_balance - this.model.f_preamount
      } else {
        this.model.f_totalcost = this.model.f_preamount - this.model.f_balance
        this.model.f_curbalance = 0
        this.model.f_collection = this.model.f_totalcost
      }
    },
    calText (val) {
      let str = ''
      val.forEach((item) => {
        str = str + item.f_price + ' x ' + item.f_gas + '+'
      })
      str = str.slice(0, str.length - 1)
      this.calculatedetail = str
    },
    close () {
      this.showprint = false
      this.print = false
      this.clean()
    }
  },
  computed: {
    'curbalance' () {
      if (this.model.f_pregas !== '' && this.model.f_preamount !== '') {
        if (this.model.f_preamount < this.model.f_balance) {
          return (this.model.f_balance - this.model.f_preamount + (this.model.f_collection - 0) - this.model.f_totalcost).toFixed(2)
        } else {
          return (this.model.f_collection - this.model.f_totalcost).toFixed(2)
        }
      } else {
        return 0
      }
    },
    paytype () {
      return AppData.getParam('付款方式')
    }
  }
}
</script>

<style>
</style>
